<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
        <link rel="shortcut icon" type="image/ico" href="images/vineta-globo.png" />
        <title> :: Gift 2 You ::</title>
        
        <script lang="javascript" type="text/javascript" src="js/jquery-1.9.1.js"></script>
        <link type="text/css" href="css/g2u.css" rel="stylesheet" media="screen" />
        
        <style>
            
            #mast-head-main {
                width: 700px; 
                height: 360px; 
                margin: 0 auto 45px auto; 
                position: relative;
            }
            
            #masthead {
                width: 100%; 
                height: 100%; 
                /*background: url('images/1.jpg') top center no-repeat;*/
                background-size: 100% 100%;
            }
            
            #masthead-inner-wrapper {
                position: absolute; 
                left: 30px; 
                top: 60px;
            }
        </style>
        <script>
            $(document).ready(function(){
               $.post('nubes.php', function(data){
                   $("html").append(data);
               })
            });
        </script>
    </head>
    <body>
        

        <table cellpadding="0" cellspacing="0" style="width: 100%; height: 500px; border-color: lightgray;" border="0">
            <tr>
                <td style="width: 25%; vertical-align: top;">
                    <div>
                        <!-- Logo G2U -->
                        <center>
                            <img src="images/logo.png"/>
                        </center>
                    </div>
                    
                    <div>
                        <center>
                            <!-- BOTON LOGIN FACEBOOK -->
                            <div id="login" style="display: none;" >
                                <div id="div1" style="display: none;">
                                    <img src="images/fb-login-button_2.png" width="250" style="cursor: pointer;" onclick="logIn();"/>
                                </div>
                                <div id="div2" style="display: none;">
                                    <img src="images/gif/fb_loading.gif" />
                                </div>
                            </div>
                            <div>
                                <div style="cursor: pointer" onclick="$('#mail_login').toggle(); $('#correo').focus();">
                                    <img src="images/email-login.png" width="250px" height="45px"/>
                                </div>
                                <div id="mail_login" style="display: none;">
                                    <form onsubmit="login_mail(); return false;" id="formulario" name="formulario">
                                        <input type="email" 
                                               size="30"
                                               placeholder="Ingresa tu correo" 
                                               id="correo"
                                               required="required"
                                               style="font-family: g2u;" />
                                        <br/>
                                        <input type="password" 
                                               size="30"
                                               placeholder="Ingresa tu clave" 
                                               id="clave" 
                                               required="required"
                                               style="font-family: g2u;" />
                                        <br/>
                                        <img src="images/login.png" height="25" style="cursor: pointer;" onclick="$('#formulario').submit();" />
                                    </form>
                                </div>
                                <div id="div3" style="display: none;">
                                    <img src="images/gif/fb_loading.gif" />
                                </div>
                            </div>
                            <!-- BOTON LOGIN FACEBOOK -->
                            
                            <!-- BOTON LOGOUT -->
                            <div id="logout" style="display: none;" >
                                <img src="images/fb-logout.png" style="cursor: pointer;" onclick="logOut();" />
                                <br/><br/>
                            </div>
                            <!-- BOTON LOGOUT -->
                        </center>
                    </div>
                    <div>
                        <!-- Cuadro Facebook Like -->
                        <center>
                        <fb:like-box href="http://www.facebook.com/myG2U" width="220" show_faces="true" stream="false" header="true"></fb:like-box>
                        </center>
                    </div>
                </td>
                <td style="width: 75%; vertical-align: top; text-align: right;">
                    <div style="padding-right: 100px;">
                        <img src="images/texto.png"  />
                    </div>
                    <div>
                        <div id="mast-head-main">
            	            <div id="mast-head-blurb">
                                <div id="masthead" style="opacity: 1; ">
                                    <img src="images/navidad.jpg" style="width: 700px; height: 360px;" id="1" />
                                    <img src="images/regalo.jpg" style="width: 550px; height: 360px; display: none;" id="2" />
                                    <img src="images/3.jpg" style="width: 700px; height: 360px; display: none;" id="3" />
                                </div>
                                <div id="masthead-inner-wrapper"></div>
                            </div>
                        </div>
                        <script>
                        $(document).ready(function(){
                           setTimeout("sliderG2U()", 1500);
                        });
    
                        function sliderG2U(){
                            setTimeout(function (){$("#1").slideUp(1000);}, 6500);
                            setTimeout(function (){$("#2").slideDown(1500);}, 6500);

                            setTimeout(function (){$("#2").slideUp(1000);}, 12500);
                            setTimeout(function (){$("#3").slideDown(1500);}, 12500);

                            setTimeout(function (){$("#3").slideUp(1000);}, 18500);
                            setTimeout(function (){$("#1").slideDown(1500);}, 18500);
                            
                            setTimeout("sliderG2U()", 20000);
                        }
                        </script>
                    </div>
                    <div id="fb-root" style="display: none;"></div>
                    <div id="capaSesion" style="display: none;"></div>
                </td>
            </tr>
        </table>
        
        
        <!-- FACEBOOK JAVASCRIPT - INICIO -->
        <script>
          window.fbAsyncInit = function() {
          FB.init({
            appId      : '1398829387019074', // App ID
            channelUrl : '//www.juancarbonel.com/proyectos/g2u/channel.html',
            status     : true, // check login status
            cookie     : true, // enable cookies to allow the server to access the session
            xfbml      : true  // parse XFBML
          });
        
            //$(document).trigger('fbload');

            FB.Event.subscribe('auth.authResponseChange', function(response) {
                if (response.status === 'connected') {
                    //cambiarEstadoSession();
                }
            });

          };
          
          

          (function(d){
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            //js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1398829387019074";
            ref.parentNode.insertBefore(js, ref);
          }(document));

        </script>
        
        <script>
            $(document).ready(function(){
                $("#login").fadeIn(800, function(){
                    $("#div1").slideDown();
                });
            });
            
            $(document).on(
                'fbload',
                function(){
                    FB.getLoginStatus(function(res){
                        if (res.status == "connected") {
                            
                            FB.api('/me', function(user){
                                cambiarEstadoSession();
                                $("#logout").show();
                            });
                            
                        } else {
                            $("#login").show();
                        }
                    });
                }
            );
            
            function logIn(){
            
                $("#div1").slideUp();
                $("#div2").slideDown();
            
                FB.getLoginStatus(function(res){
                    if (res.status == "connected") {
                        cambiarEstadoSession();
                    } else {
                        FB.login();
                    }
                });
                
            }
            
            function cambiarEstadoSession(){
                FB.api('/me', function(user){
                    FB.api('/me/picture', function(picture){
                        var mail = user.email;
                        url = 'load.php?'+
                                'id='+user.id+
                                '&picture='+picture.data.url+
                                '&name='+user.name+
                                '&fname='+user.first_name+
                                '&lname='+user.last_name+
                                '&link='+user.link+
                                '&uname='+user.username+
                                '&birthday='+user.birthday+
                                '&email='+mail+
                                '&type=facebook';
                        $.post( url, function( data ) {
                            $("#capaSesion").html( data );
                        });
                    });
                });
            }
            
            
            function login_mail(){
                
                if($("#correo").val().trim()==''){
                    alert("Debe ingresar un correo.");
                    $("#correo").focus();
                    return false;
                }
                if($("#clave").val().trim()==''){
                    alert("Debe ingresar una clave.");
                    $("#clave").focus();
                    return false;
                }
            
                $("#mail_login").slideUp();
                $("#div3").slideDown();
                
                url = 'load.php?'+
                        '&email='+$("#correo").val()+
                        '&password='+$("#clave").val()+
                        '&type=mail';
                $.post( url, function( data ) {
                    $("#capaSesion").html( data );
                });
            }
        </script>
    </body>
</html>